<template>
  <div class="config-organization-medical detail" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="fr ac">
      <h2 class="title f1">医疗机关配置</h2>
      <div class="f-14 a link">批量导入<i class="el-icon-plus b ml-5"></i></div>
    </div>
    <div class="card f-14">
      <div class="fr ac item">
        <div class="label">单位名称</div>
        <el-input v-model="form.officename"/>
      </div>
      <div class="fr ac item">
        <div class="label">省</div>
        <el-select v-model="form.provinceid" @change="changeMap('provincecityname', $event)">
          <el-option v-for="item in provinceList" :key="item.code" :value="item.code" :label="item.name"/>
        </el-select>
      </div>
      <div class="fr ac item">
        <div class="label">市</div>
        <el-select :disabled="!form.provinceid" v-model="form.cityid" @change="changeMap('cityname', $event)">
          <el-option v-for="item in cityList" :key="item.code" :value="item.code" :label="item.name"/>
        </el-select>
      </div>
      <div class="fr ac item">
        <div class="label">区县</div>
        <el-select :disabled="!form.cityid" v-model="form.countyid" @change="changeMap('county', $event)">
          <el-option v-for="item in countyList" :key="item.code" :value="item.code" :label="item.name"/>
        </el-select>
      </div>
      <div class="fr ac item">
        <div class="label">单位地址</div>
        <el-input v-model="form.address"/>
      </div>
      <div class="fr ac item">
        <div class="label">单位电话</div>
        <el-input v-model="form.workphone"/>
      </div>
      <div class="fr ac item">
        <div class="label">负责人</div>
        <el-input v-model="form.personincharge"></el-input>
      </div>
      <div class="fr ac item">
        <div class="label">负责人联系方式</div>
        <el-input v-model="form.contactphone"></el-input>
      </div>
      <div class="fr item">
        <div class="label pt-5">简介</div>
        <el-input type="textarea" :autosize="{ minRows: 10 }" resize="none" v-model="form.details"/>
      </div>
      <div class="tc mt-30">
        <el-button type="primary" @click="submit" :loading="submiting">保存</el-button>
      </div>
    </div>

    <import-box :show.sync="importBox.show"
                :demo-url="`/api/medical/template/export?userid=${$store.state.user.userid}`"
                :url="`/api/medical/medicalimport?userid=${$store.state.user.userid}`"/>
  </div>
</template>

<script>
  import moment from '@/utils/moment'

  export default {
    name: 'config-organization-medical',
    props: [ 'id' ],
    data () {
      return {
        loading: false,
        submiting: false,
        form: {
          officename: '',
          provincecityname: '',
          provinceid: '',
          cityname: '',
          cityid: '',
          county: '',
          countyid: '',
          address: '',
          workphone: '',
          personincharge: '',
          contactphone: '',
          details: ''
        },
        importBox: {
          show: false
        }
      }
    },
    computed: {
      provinceList () {
        return this.$store.state.map
      },
      cityList () {
        if (!this.form.provinceid) return []
        const item = this.provinceList.find(v => v.code === this.form.provinceid) || {}
        const list = item.children || []
        return list
      },
      countyList () {
        if (!this.form.cityid) return []
        const item = this.cityList.find(v => v.code === this.form.cityid) || {}
        const list = item.children || []
        return list
      }
    },
    methods: {
      getDetail () {
        this.loading = true
        this.$http('/medical/form', { medicalid: ~~this.id }).then(
          res => {
            const { data = {} } = res
            for (const k in this.form) {
              this.form[k] = data[k] || ''
            }
            this.loading = false
          }
        )
      },
      validate () {
        if (!this.form.officename) {
          this.$notify.warning('请输入单位名称')
          return false
        }
        if (!this.form.provinceid) {
          this.$notify.warning('请选择省份')
          return false
        }
        if (!this.form.cityid) {
          this.$notify.warning('请选择城市')
          return false
        }
        if (!this.form.countyid) {
          this.$notify.warning('请选择区县')
          return false
        }
        if (!this.form.address) {
          this.$notify.warning('请输入单位地址')
          return false
        }
        if (!this.form.workphone) {
          this.$notify.warning('请输入单位电话')
          return false
        }
        if (!this.form.personincharge) {
          this.$notify.warning('请输入负责人')
          return false
        }
        if (!this.form.contactphone) {
          this.$notify.warning('请输入负责人联系方式')
          return false
        }
        if (!this.form.details) {
          this.$notify.warning('请输入简介')
          return false
        }
        return true
      },
      submit () {
        if (!this.validate()) return
        const form = Object.assign({}, this.form)
        const { id } = this
        if (id) {
          form.medicalid = ~~id
          form.updatetime = moment().format('YYYY-MM-DD HH:mm:ss')
        } else {
          form.createtime = moment().format('YYYY-MM-DD HH:mm:ss')
          form.updatetime = form.createtime
        }
        this.submiting = true
        this.$http('/medical/saveOrUpdate', form).then(
          res => {
            this.$notify({
              title: '成功',
              message: `${id ? '保存' : '创建'}成功`,
              type: 'success'
            })
            this.submiting = false
            this.$router.replace('/config/orgManage')
          }
        )
      },
      changeMap (key, code) {
        const lists = {
          provincecityname: { list: 'provinceList', clear: ['cityname', 'cityid', 'county', 'countyid'] },
          cityname: { list: 'cityList', clear: ['county', 'countyid'] },
          county: { list: 'countyList', clear: [] }
        }
        const item = this[lists[key].list].find(v => v.code === code) || {}
        this.form[key] = item.name || ''
        lists[key].clear.forEach(v => {
          this.form[v] = ''
        })
      }
    },
    created () {
      if (this.id) this.getDetail()
    }
  }
</script>
